<template>
    <div class="not-found">
      <div class="not-found-content">
        <h1 class="not-found-title">404</h1>
        <p class="not-found-message">哎呀！页面正在开发中...</p>
        <p class="not-found-suggestion">请稍后再试，或者返回首页。</p>
        <div class="progress-container">
          <div class="progress-bar">
            <div class="progress" :style="{ width: progress + '%' }"></div>
          </div>
          <p class="progress-text">{{ progress }}% 完成</p>
        </div>
        <p class="not-found-link">
          <router-link to="/" class="back-home">返回首页</router-link>
        </p>
      </div>
      <div class="not-found-image">
        <img src="https://via.placeholder.com/400x250?text=Page+Under+Construction" alt="404 Image" />
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'NotFound',
    data() {
      return {
        progress: 0, // 初始化进度条
      };
    },
    mounted() {
      this.startProgress();
    },
    methods: {
      // 模拟开发进度
      startProgress() {
        let progressInterval = setInterval(() => {
          if (this.progress < 100) {
            this.progress += 2; // 每2%增加一次
          } else {
            clearInterval(progressInterval);
          }
        }, 100); // 每100ms增加一次进度
      },
    },
  };
  </script>
  
  <style scoped>
  .not-found {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f4f7fa;
    flex-direction: column;
    text-align: center;
  }
  
  .not-found-content {
    font-family: 'Arial', sans-serif;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  
  .not-found-title {
    font-size: 6rem;
    font-weight: bold;
    color: #ff6347;
    margin: 0;
  }
  
  .not-found-message {
    font-size: 1.5rem;
    color: #333;
    margin: 20px 0;
  }
  
  .not-found-suggestion {
    font-size: 1.2rem;
    color: #777;
  }
  
  .progress-container {
    width: 100%;
    margin: 20px 0;
  }
  
  .progress-bar {
    width: 80%;
    height: 20px;
    background-color: #e0e0e0;
    border-radius: 10px;
    margin: 10px auto;
    overflow: hidden;
  }
  
  .progress {
    height: 100%;
    background-color: #007bff;
    width: 0;
    border-radius: 10px;
    transition: width 0.1s ease-in-out;
  }
  
  .progress-text {
    font-size: 1.1rem;
    color: #333;
  }
  
  .not-found-link {
    margin-top: 30px;
  }
  
  .back-home {
    padding: 12px 30px;
    font-size: 1.2rem;
    background-color: #007bff;
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.3s ease;
  }
  
  .back-home:hover {
    background-color: #0056b3;
  }
  
  .not-found-image {
    margin-top: 50px;
  }
  
  .not-found-image img {
    width: 400px;
    height: auto;
    max-width: 100%;
    border-radius: 8px;
  }
  </style>
  